// 箱体图 需要使用echarts5
(function () {
    function asc(arr) {
        arr.sort(function (a, b) {
            return a - b;
        });
        return arr;
    }
    function quantile(ascArr, p) {
        var H = (ascArr.length - 1) * p + 1;
        var h = Math.floor(H);
        var v = +ascArr[h - 1];
        var e = H - h;
        return e ? v + e * (ascArr[h] - v) : v;
    }

    function prepareBoxplotData(rawData, opt) {
        opt = opt || [];
        var boxData = [];
        var outliers = [];
        var axisData = [];
        var boundIQR = opt.boundIQR;
        var useExtreme = boundIQR === 'none' || boundIQR === 0;

        for (var i = 0; i < rawData.length; i++) {
            axisData.push(i + '');
            var ascList = asc(rawData[i].slice());
            var Q1 = quantile(ascList, 0.25);
            var Q2 = quantile(ascList, 0.5);
            var Q3 = quantile(ascList, 0.75);
            var min = ascList[0];
            var max = ascList[ascList.length - 1];
            var bound = (boundIQR == null ? 1.5 : boundIQR) * (Q3 - Q1);
            var low = useExtreme ? min : Math.max(min, Q1 - bound);
            var high = useExtreme ? max : Math.min(max, Q3 + bound);
            boxData.push([low, Q1, Q2, Q3, high]);

            for (var j = 0; j < ascList.length; j++) {
                var dataItem = ascList[j];

                if (dataItem < low || dataItem > high) {
                    var outlier = [i, dataItem];
                    opt.layout === 'vertical' && outlier.reverse();
                    outliers.push(outlier);
                }
            }
        }

        return {
            boxData: boxData,
            outliers: outliers,
            axisData: axisData
        };
    }

    let oEchart = echarts.init(document.getElementById('boxplotChart'));
    const getRandom = (n, m) => Math.round(Math.random() * (m - n) + n);

    const getData = function(legendData, xAxisData){
        const data = [];
        for (var seriesIndex = 0; seriesIndex < legendData.length; seriesIndex++) {
            var seriesData = [];
            for (var i = 0; i < xAxisData.length; i++) {
                var cate = [];
                for (var j = 0; j < 10; j++) {
                    // cate.push(Math.random() * 400);
                    cate.push(getRandom(100, 300));
                }
                for (var j = 0; j < 80; j++) {
                    // cate.push(Math.random() * 200);
                    cate.push(getRandom(500, 700));
                }
                for (var j = 0; j < 10; j++) {
                    // cate.push(Math.random() * 400);
                    cate.push(getRandom(700, 900));
                }
                seriesData.push(cate);
            }
            console.log(seriesData, 'seriesData')
            data.push(prepareBoxplotData(seriesData));
        }
        return data
    }
    

    const formatter = (params) => {
        if(params.seriesType === 'pictorialBar'){
            return params.seriesName + '<br>' + params.marker + params.data[1]
        }
        let txt = '';
        txt += params.seriesName + '<br>' 
            + params.marker + '上限值：' + params.data[5] + '<br>' 
            + params.marker + '上四分位数：' + params.data[4] + '<br>' 
            + params.marker + '中位数：' + params.data[3] + '<br>' 
            + params.marker + '下四分位数:' + params.data[2] + '<br>' 
            + params.marker + '下限值：' + params.data[1] + '<br>' 
        return txt
    }
    const legendData = ["北京", "上海", "天津"] // ["category0", "category1", "category2"] //;
    const xAxisData = [ '中毒', '心脏', '胃病', '胃病1', '胃病2', '胃病3', '胃病4', '胃病5' ]
    // console.log(legendData, 'legendData')
    // console.log(xAxisData, 'xAxisData')
    const data = getData(legendData, xAxisData)

    option = {
        legend: {
            y: "10%",
            data: legendData
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: "shadow",
            },
            formatter: formatter
        },
        grid: {
            top: "20%"
        },
        xAxis: {
            type: "category",
            splitArea: {
                show: true,
              },
            data: xAxisData
        },
        yAxis: {
            type: "value",
            name: "Value",
            min: 0,
            max: 1100,
            splitArea: {
                show: false,
            },
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: data[0].boxData.length > 3 ? Math.round(100 / (data[0].boxData.length / 2)) : 100
            },
            {
                show: true,
                type: 'slider'
            }
        ],
        series: [
            ...legendData.map((item, index) => {
                return {
                    name: item,
                    type: "boxplot",
                    data: data[index].boxData
                }
            }),
            ...legendData.map((item, index) => {
                return {
                    name: item,
                    type: "pictorialBar",
                    symbolPosition: "end",
                    symbolSize: 8,
                    barGap: "30%",
                    data: data[index].outliers,
                }
            })
        ],
    };
    // console.log(option);

    oEchart.setOption(option)
})()